<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>vue 发送 http 请求</title>
</head>
<body>
<div id="app">
    <h1>{{ object }}</h1>
</div>

<script type="module">
    import {createApp, ref, onMounted,watch} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let object = ref({
                    name:"abcque",
                    age:18
                })

                onMounted(
                    ()=>{
                        fetch(
                            "https://httpbin.org/get?name=abc&gender=man",
                            {
                                method: "GET",
                            },
                        ).then(response => {
                            return response.json()
                        }).then(function (data) {
                            console.log(data.args);
                            object.value = data.args
                        });
                    }
                )

                watch(
                    ()=> object,
                    ()=>{
                        console.log("object 对象更新了");
                    },
                    {
                        deep:true
                    }
                )

                return {
                    object,
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>